<template>
  <div class="emplyees">
    <!-- 头部组件 -->
    <headTool>
      <!-- <span slot="befort"></span> -->
      <span slot="after">
        <el-button type="success" size="small" @click="exExcel"
          >普通excle导出</el-button
        >
        <el-button type="primary" size="small" @click="excelHerdHead"
          >复杂excle导入</el-button
        >
        <el-button
          type="success"
          size="small"
          @click="$router.push({ path: '/import', query: { type: 'user' } })"
          >excle导入</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addClick"
          >新增员工</el-button
        >
      </span>
    </headTool>
    <!-- 表单 -->
    <el-card class="table-card">
      <template>
        <el-table :data="employeesData" border style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column sortable prop="username" label="姓名" width="120">
          </el-table-column>
          <el-table-column label="头像" width="80" class="userphoto">
            <template scope="{row}">
              <img
                :src="row.staffPhoto"
                v-imageerror="defaultImg"
                @click="showQrCode(row.staffPhoto)"
                style="width:100%"
              />
            </template>
          </el-table-column>
          <el-table-column sortable prop="mobile" label="手机号" width="120">
          </el-table-column>
          <el-table-column sortable prop="workNumber" label="工号" width="120">
          </el-table-column>
          <el-table-column sortable label="聘用形式" width="80">
            <template scope="{row}">
              {{ row.formOfEmployment | hireType }}
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="departmentName"
            label="部门"
            width="120"
          >
          </el-table-column>
          <el-table-column sortable label="入职时间" width="120">
            <template slot-scope="{ row }"
              >{{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column sortable label="转正时间" width="120">
            <template slot-scope="{ row }"
              >{{ row.correctionTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column sortable label="状态" width="80">
            <template scope="{row}">
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="260">
            <template slot-scope="{ row }">
              <el-button
                @click="$router.push(`/employees/detail/${row.id}`)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="roleKeyClick(row.id)"
                >角色</el-button
              >
              <el-button
                v-if="checkPoint('POINTS-EMP-DEl')"
                type="text"
                size="small"
                @click="delEmpList(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 页码 -->
      <el-pagination
        @current-change="currentchang"
        :current-page.sync="page.page"
        :page-size="page.size"
        layout="total, prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <addimport :adddialogForm.sync="showAddFrom"></addimport>
    <!-- 角色管理弹窗 -->
    <role-control
      ref="roleControl"
      :userId="currentId"
      :dialogTableVisible.sync="dialogTableVisible"
    ></role-control>
    <!-- 二维码显示的弹窗 -->
    <el-dialog :visible.sync="showCodeDialog" title="二维码">
      <!-- 二维码 -->
      <el-row type="flex" justify="center">
        <canvas ref="canvas" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getEmpList, delEmpList } from '@/api/employees'
import empconstant from '@/api/constant/employees'
// 导入新增弹框组件
import addimport from './components/add-employess.vue'
import { formatDate } from '@/filters'
// 导入角色管理组件
import roleControl from './components/roles.vue'
// 导入二维码生成插件
import QrCode from 'qrcode'
export default {
  name: 'employees',
  components: {
    addimport,
    roleControl
  },
  data () {
    return {
      // 页码数据
      page: {
        page: 1,
        total: 1,
        size: 10
      },
      defaultImg: require('@/assets/common/bigUserHeader.png'),
      employeesData: [],
      showAddFrom: false,
      dialogTableVisible: false,
      currentId: '',
      showCodeDialog: false, //二维码,
      firstClick: 0
    }
  },
  methods: {
    // 页码改变事件
    currentchang (page) {
      this.page.page = page
      this.getEmpList()
    },
    async getEmpList () {
      let res = await getEmpList(this.page)
      this.employeesData = res.data.rows
      // 因为switch组件只能接收boolean类型的数据，且不能隐式转换,所以我们要自己处理
      this.employeesData.forEach(item => {
        return (item.enableState = item.enableState == 1 ? true : false)
      })
      this.page.total = res.data.total
    },
    // 删除事件
    async delEmpList (id) {
      // 交互
      try {
        // 删除
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delEmpList(id)
        this.$message.success('删除成功')
        // 刷新页面
        // 如果是最后一页,只有一条数据,并且不是首页就请求上一页
        if (employeesData.length == 1 && this.page.page != 1) {
          this.page.page--
        }
        this.getEmpList()
      } catch (error) {
        this.$message('已取消')
      }
    },
    // 新增员工按钮
    addClick () {
      this.showAddFrom = true
    },
    // 导出员工
    async exExcel () {
      let allpage = { page: 1, size: this.page.total }
      // 导出所有的列表
      let res = await getEmpList(allpage)
      let allList = res.data.rows
      // 准备表头
      const headers = {
        手机号: 'mobile',
        姓名: 'username',
        入职时间: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      // 拿出header中的键，用做表头、取出对应的英文名字去作为遍历原数组的键
      let keys = Object.keys(headers)
      // 使用map方法生成新的数组
      let newAllList = allList.map(item => {
        // 遍历item对象，将其转换成数组
        // 准备一个空数组，用于存放遍历生成的每一个数组并最后return出去
        let arr = []
        for (let key in headers) {
          // 根据中文的key取出英文的key
          let engkey = headers[key]
          // 处理聘用形式
          if (key == '聘用形式') {
            // 这里是双重循环，一开始是用了同样变量名导致表达式没有成立，过滤器没有返回数据
            let res = item[engkey]
              ? empconstant.hireType.filter(val => val.id == item[engkey])[0]
                  .value
              : '未知'
            arr.push(res)
          } else if (key == '入职时间' || key == '转正日期') {
            // 处理时间
            // 直接调用全局事件过滤器
            let res = formatDate(item[engkey])
            arr.push(res)
          } else {
            arr.push(item[engkey])
          }
        }

        return arr
      })
      // 懒加载使用插件的办法
      import('@/vendor/Export2Excel').then(excel => {
        // 插件要写了这个方法才能使用
        excel.export_json_to_excel({
          // 表头，必填，接收的是一个数组
          header: keys,
          // data接收的是二维数组
          data: newAllList,
          filename: '员工列表'
        })
      })
    },
    // 导出复杂表头
    async excelHerdHead () {
      this.$message.warning('代码已注释，有时间或者有必要的在打开完善')
      /**
       *
      let multiHeader = [['姓名', '主要信息', '', '', '', '部门']] //要于表头的数量对应
      let merges = ['A1:A2', 'B1:F1', 'G1:G2'] //要合并的行或者是列
      import('@/vendor/Export3Excel').then(excel => {
        excle.export_json_to_excel({
          header: keys, //表头，复杂表头的参照，这个是必须的参数
          data: newAllList,
          filename: '复杂表头员工列表',
          multiHeader, //复杂表头
          merges //要合并的选项
        })
      })*/
    },
    // 角色点击事件
    roleKeyClick (id) {
      this.dialogTableVisible = true
      this.currentId = id
      this.$refs.roleControl.getMoreUserInfo(id)
    },
    // 点击头像生成二维码

    showQrCode (url) {
      if (url) {
        // 显示对话框
        this.showCodeDialog = true
        /*   为true的时候还没有渲染DOM,所以就意味着里面还没有canvas标签
             那么所以需要等dom渲染了再来找canvas标签，并把它画成二维码
             用一个回调：nextTick：下次dom更新调用
        */
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.canvas, url)
        })
      } else {
        // 节流,防止用户一直点,alrent弹框一直显示,浪费新能且,遮挡屏幕
        if (Date.now() - this.firstClick > 3000) {
          this.$message.warning('该员工没有图片！')
          this.firstClick = Date.now()
        }
      }
    }
  },

  // 钩子
  created () {
    this.getEmpList()
  },
  filters: {
    // 过滤器，处理枚举类型数据
    // hireType (type) {
    //   return (
    //     empconstant.hireType &&
    //     empconstant.hireType.filter(item => item.id == type)[0].value
    //   )
    // }
    hireType (type) {
      // 因为这里有可能导入的员工中没有聘用形式的数据，所以用三元表达式，先去判断是否有，有此项数据再进行遍历，没有就输出未知
      return type
        ? empconstant.hireType.filter(item => item.id == type)[0].value
        : '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card {
  margin: 20px 20px;
}
.el-pagination {
  text-align: end;
  margin: 16px 0;
}
</style>
